<template>
  <div class="protocol">
    <header-bar></header-bar>
    <div v-if="!isEmpty" class="pro-content">
      <a-spin :loading="loading" style="width: 100%; height: 100%">
        <div class="content-center">
          <div class="protocol-title">用户协议</div>
          <toolbar
            style="border-bottom: 1px solid #dfe2e5"
            :editor="editorRef"
            mode="default"
          />

          <editor
            v-model="protocolContent"
            style="
              height: calc(100% - 40px);
              overflow-y: hidden;
              min-height: 400px;
            "
            :default-config="editorConfig"
            mode="default"
            @onCreated="handleCreated"
          />
        </div>
      </a-spin>
    </div>
    <div v-else class="empty">
      <img
        src="@/assets/images/protocol/empty_status.png"
        alt=""
        class="empty_img"
      />
      <span class="empty_tips">暂无用户协议</span>
      <span class="empty_sub_tips">用户协议制定中，敬请期待</span>
    </div>
    <footer-bar
      :telegramFirst="telegramFirst"
      :skypeFirst="skypeFirst"
      :icp="icp"
    ></footer-bar>
    <contact-float :contact-state="contactState"></contact-float>
  </div>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'

import { useTitle } from '@vueuse/core'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import apis from '@/apis'
import { systemStore } from '@/stores/modules/system'

const useSystemStore = systemStore()
const loading = ref(false)
const editorRef = shallowRef()
const protocolContent = ref('')
const editorConfig = {
  placeholder: '',
  readOnly: true,
  autoFocus: false

  // maxLength: 8000
}
const websiteTitle = computed(() => useSystemStore.title)
const isEmpty = ref(false)
const getProtocol = () => {
  loading.value = true
  apis.user
    .protocol()
    .then(res => {
      protocolContent.value = res.data?.protocol_configuration ?? ''
      const div = document.createElement('div')
      div.innerHTML = protocolContent.value
      document.body.appendChild(div)
      isEmpty.value = (div.textContent ?? '').length < 1
      document.body.removeChild(div)
    })
    .finally(() => {
      loading.value = false
    })
}
const icp = ref('')
const contactState = ref<Partial<ContactState>>({})
const telegramFirst = ref('')
const skypeFirst = ref('')
const getSupportData = () => {
  apis.user.support().then(res => {
    contactState.value = {
      phone: res.data?.phone || [],
      qq: res.data?.QQ || [],
      email: res.data?.email || [],
      telegram: res.data?.telegram || [],
      skype: res.data?.skype || []
    }
    icp.value = res.data?.icp || ''
    if (contactState.value?.telegram?.length) {
      telegramFirst.value = contactState.value?.telegram[0]
    }
    if (contactState.value?.skype?.length) {
      skypeFirst.value = contactState.value?.skype[0]
    }
  })
}
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
// const isEmpty = computed(() => {
//   return protocolContent.value.replace(/(<\S*>)|(<\/\S*>)/g, '')
// })
onMounted(() => {
  getProtocol()
  getSupportData()
  useSystemStore.getSignData()
  const siteTitle = useTitle()
  siteTitle.value = `${websiteTitle.value}-用户协议`
})

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>
<style lang="less" scoped>
.protocol {
  min-height: 100vh;
  width: 100%;
  background: url('@/assets/images/protocol/user_protocol_banner.png') no-repeat
    center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  .pro-content {
    width: 100%;
    min-height: 100%;
    max-width: 1440px;
    margin: auto;
    padding: 84px 0 0;
    border-radius: 8px;
    :deep([data-w-e-toolbar='true']) {
      display: none;
    }
    .content-center {
      border-radius: 8px;
      overflow: hidden;
      background-color: #fff;
      .protocol-title {
        text-align: center;
        padding-top: 48px;
        padding-bottom: 16px;
        font-size: 20px;
        color: #0d0e15;
        font-family: 'PingFang SC medium';
      }
      :deep(.w-e-scroll) {
        & > div {
          padding: 0 48px 24px;
        }
      }
    }
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 184px 0 193px 0;
    flex: 1;
    .empty_img {
      width: 200px;
      height: 175px;
      margin-bottom: 8px;
    }
    .empty_tips {
      color: #43474d;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px;
    }
    .empty_sub_tips {
      color: #8f959e;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      margin-top: 4px;
    }
  }
}
</style>
